<template>
  <div>
    <ul>
      <input type="text" v-model="value" name id placeholder="请输入内容" />
      <button @click="add">添加</button>
      <li v-for="(item, index) in $store.state.list" :key="index">
        <input type="checkbox" v-model="item.done" />
        {{item.info}}
        <button @click="del(item.id)">删除</button>
      </li>
      <span>共{{this.$store.getters.mlength }}条</span>
      <button @click="all">全选</button>
      <button>选中</button>
      <button @click="noall">全清除</button>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  created() {
    this.$store.dispatch("aList");
  },
  methods: {
    add() {
      var obj = {
        id: 5,
        info: this.value,
        done: false,
      };
      this.$store.commit("madd", obj);
      this.value = "";
    },
    del(id) {
      this.$store.commit("mdel", id);
    },
    all() {
      this.$store.commit("mall");
    },
    noall() {
      this.$store.commit("mnoall");
    },
  },
};
</script>
<style lang="less" scoped>
</style>